<template>
  <div class="user-msg-box" :class="{clickable: isLink}" @click="goTo">
    <div class="avatar" :class="avatarSize">
      <img :src="userMsg.icon">
    </div>
    <div class="content">
      <p class="name">{{userMsg.nickname}}</p>
      <p class="desc">密聊号：{{userMsg.username}}</p>
    </div>
    <van-icon name="arrow" v-if="isLink"></van-icon>
  </div>
</template>

<script>
  export default {
    name: 'userMsgBox',
    props: {
      isLink: {
        type: Boolean,
        default: false
      },
      userMsg: {
        type: Object,
        default: () => {
          return {}
        }
      },
      avatarSize: {
        type: String,
        default: ''
      },
      to: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    methods: {
      goTo () {
        if (this.to.name || this.to.path) {
          this.$router.push(this.to)
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .user-msg-box {
    display: flex;
    align-items: center;
    padding: .14rem .2rem;
    background: #fff;

    .avatar {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 0.9rem;
      height: 0.9rem;
      background: #e7eaec;
      border-radius: 50%;
      font-size: .32rem;
      font-weight: bold;
      color: #6b7294;
      margin-right: .2rem;
      overflow: hidden;

      &.large {
        width: 1.2rem;
        height: 1.2rem;
      }

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .content {
      flex: 1;

      .name {
        font-size: .3rem;
        color: #333;
        margin-bottom: .14rem;
      }

      .desc {
        color: #999;
        font-size: .26rem;
        line-height: 1.3;
      }
    }
  }
</style>
